<template>
  <div class="block">
    <div class="div1">
      <el-row class="el-row" :gutter="20">
        <el-row class="el-row">
          <el-col class="padding-10" :span="5" style="font-weight: bolder;font-size: 16px">客户统计</el-col>
        </el-row>
        <el-col :span="6"><div class="grid-content bg-purple padding-10">
          <el-row  class="font-overstriking"><span class="span1">{{customerCount}}</span></el-row>
          <el-row class="font-light-color-"><span class="span2">客户总数</span></el-row>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple padding-10">
          <el-row class="font-overstriking"><span class="span1">{{ accountCount }}</span></el-row>
          <el-row class="font-light-color"><span class="span2">子账号数量</span></el-row>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple padding-10">
          <el-row class="font-overstriking"><span class="span1">{{ balanceCount }}</span></el-row>
          <el-row class="font-light-color"><span class="span2">钱包总余额</span></el-row>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple padding-10">
          <el-row class="font-overstriking"><span class="span1">{{ consumeMoneyCount }}</span></el-row>
          <el-row class="font-light-color"><span class="span2">消费金额</span></el-row>
        </div></el-col>
      </el-row>
    </div>
    <div class="div1">
      <el-row class="padding-10" :gutter="20" style="font-weight: bolder;font-size: 16px;margin-left: 10px;">
        客户列表
      </el-row>
      <el-row class="el-row" :gutter="20" style="margin-left: 10px;">
        <el-col :span="11">
          时间选择:
          <el-radio-group v-model="selectCustomerCondition.timeBucket"
                          @change="timeChilck(-1)">
            <el-radio-button label="-1">全部</el-radio-button>
            <el-radio-button v-for="item in timeBuckets" :label="item.value" >{{item.label}}</el-radio-button>
          </el-radio-group>
        </el-col>

        <el-col :span="7">
          <el-date-picker
            v-model="selectCustomerCondition.timeScope"
            value-format="yyyy-MM-dd"
            @change="timeChilck(1)"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row class="el-row" :gutter="20">
        <el-col :span="4" style="margin-left: 10px">
          <el-input
              placeholder="搜索..."
              v-model="selectCustomerCondition.customerName"
              prefix-icon="el-icon-search"
          >
          </el-input>
        </el-col>

        <el-col :span="5">
          <el-button @click="openAdvancedFilter()" icon="el-icon-edit">高级筛选</el-button>
        </el-col>
        <el-col :span="11">
          <el-button type="primary" @click="changeIndex(0)">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="customerInformation()">添加客户</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table
            :data="customers"
            border
            style="width: 100%">
          <el-table-column
              prop="customerName"
              label="客户名称">
            <template slot-scope="scope">
              {{scope.row.customerName}}
              <el-tag
                  v-if="scope.row.levelName==null?false:true"
                  size="mini"
                  type='info'>
                {{scope.row.levelName}}
              </el-tag>
              <el-tag
                  v-if="scope.row.tagName==null?false:true"
                  size="mini">
                {{scope.row.tagName}}
              </el-tag>
              <el-tag
                  v-if="scope.row.consumeName==null?false:true"
                  size="mini"
                  type='info'>
                {{scope.row.consumeName}}
              </el-tag>

            </template>
          </el-table-column>

          <el-table-column
            prop="customerNo"
            label="编号">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系方式">
          </el-table-column>
          <el-table-column
              prop="accountCount"
              label="子账号数量">
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              label="关联客服">
            <template slot-scope="scope">
              <span v-if="scope.row.companyName!=null">{{scope.row.companyName}}/</span>
              <span v-if="scope.row.deptName!=null">{{scope.row.deptName}}/</span>
              <span v-if="scope.row.groupName!=null">{{scope.row.groupName}}/</span>
              <span v-if="scope.row.serviceName!=null">{{scope.row.serviceName}}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="订单/任务数量">
            <template slot-scope="{row}">
              {{row.orderAmount}}/
              {{row.taskAmount}}
            </template>
          </el-table-column>
          <el-table-column
              prop="balance"
              label="钱包余额">
          </el-table-column>
          <el-table-column
              prop="consumeMoney"
              label="消费金额">
          </el-table-column>
          <el-table-column
              label="状态"
              width="100">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="0"
                  @change="statusChange(scope.row)"
                  :inactive-value="1">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="200">
            <template slot-scope="scope">
              <el-row>
                <el-col span="16">
                  <el-button @click="customerInformation(scope.row.id)" type="text" size="small">编辑</el-button>
                  <el-button @click="onDetails(scope.row.id)" type="text" size="small">用户详情</el-button>
                </el-col>
                <el-col style="padding-top: 5px" span="8">

                  <el-dropdown>
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="openTopUp(scope.row.id)">充值</el-dropdown-item>
                      <el-dropdown-item @click.native="openWithdraw(scope.row.id)" >提现</el-dropdown-item>
                      <el-dropdown-item @click.native="openIm(scope.row.id)">新增账号</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>

            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="block">
          <el-pagination
            @current-change="selectCustomerPage()"
            :current-page.sync="condition.index"
            layout="prev, pager, next"
            :page-count="max">
          </el-pagination>
        </div>
      </el-row>
    </div>




    <template>
      <!--高级查询弹窗-->
      <div>
        <el-dialog width="500px" :visible.sync="visible3">
          <el-form ref="elForm" :model="selectCustomerCondition"  size="medium" label-width="100px">
            <el-form-item label="关联部门:">
              <el-cascader
                  v-model="selectCustomerCondition.workplaceIds"
                  :options="depts"
                  :props="{checkStrictly:true,value:'id',label:'name'}"
                  :style="{width: '100%'}"
                  clearable
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="制作要求：" >
              <el-select v-model="selectCustomerCondition.makeId" placeholder="请选择制作要求" @change="$forceUpdate()" clearable :style="{width: '100%'}">
                <el-option
                    v-for="item in craftLevels"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有无余额：">
              <el-select v-model="selectCustomerCondition.balance" placeholder="请选择有无余额" @change="$forceUpdate()" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in field103" :key="item.value" :label="item.label
"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户等级：">
              <el-select v-model="selectCustomerCondition.levelId" placeholder="请选择客户等级" @change="$forceUpdate()" clearable :style="{width: '100%'}">
                <el-option
                    v-for="item in members"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="消费等级：">
              <el-select v-model="selectCustomerCondition.consumeId" placeholder="请选择消费等级" @change="$forceUpdate()" clearable :style="{width: '100%'}">
                <el-option
                    v-for="item in consumeLevels"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="closeAdvancedFilter">取消</el-button>
            <el-button type="primary" @click="changeIndex(0)">查询</el-button>
          </div>
        </el-dialog>
      </div>

      <!--用户详情-->
      <el-dialog
          title="用户详情"
          :visible.sync="visible"
          width="1100px"
          :before-close="Close">
        <CustomerDetails  :uid="uid" v-if="visible"></CustomerDetails>
      </el-dialog>
      <!--新增与修改客户-->

      <el-dialog
        :title="this.uid==0?'新增客户':'修改客户'"
          style="border-radius: 10px;"
          :visible.sync="visible2"
          width="800px"
          :before-close="Close"
      >
      <InsertAndUpdateCustomerView  :id="uid" v-if="visible2"  v-on:close="Close()"></InsertAndUpdateCustomerView>

      </el-dialog>
      <!--客户充值-->
      <el-dialog
        title="客户充值"
        style="border-radius: 10px;"
        :visible.sync="topUpVisible"
        width="500px"
        :before-close="Close"
      >
        <CustomerTopUp  v-if="topUpVisible" :id="uid"  v-on:close="Close()"></CustomerTopUp>

      </el-dialog>
      <!--客户提现-->
      <el-dialog
        title="客户提现"
        style="border-radius: 10px;"
        :visible.sync="withdrawVisible"
        width="500px"
        :before-close="Close"
      >
        <Withdrawal  v-if="withdrawVisible" :id="uid" v-on:close="Close()"></Withdrawal>

      </el-dialog>

      <!--客户账号新增-->
      <el-dialog
        style="border-radius: 10px;"
        :visible.sync="imVisible"
        width="500px"
        :before-close="Close"
      >
        <CustomerImAdd  v-if="imVisible"  :id="uid" v-on:close="Close()"></CustomerImAdd>

      </el-dialog>
    </template>

  </div>

</template>

<script>
import  {getDeptList} from "@/api/dept.js"
import {getDictByType} from "@/api/dict.js"

import { findHeader, findCustomer, updateCustomer } from '@/api/customer.js'
import {Store} from "vuex";
import InsertAndUpdateCustomerView from "@/views/customer/components/InsertAndUpdateCustomerView.vue";
import CustomerTopUp from "@/views/customer/components/CustomerTopUp.vue";
import CustomerDetails from "@/views/customer/components/CustomerDetails.vue"
import Withdrawal from '@/views/customer/components/Withdrawal.vue'
import customer from '@/router/modules/customer'
import CustomerImAdd from '@/views/customer/components/CustomerImAdd.vue'
export default {
  name: "CustomerView",
  computed: {
    customer() {
      return customer
    }
  },
  components:{
    CustomerImAdd,
    Withdrawal,
    InsertAndUpdateCustomerView,
    CustomerDetails,
    CustomerTopUp
  }
  ,
  data(){
    return{
      customerCount:0,              //客户总数
      accountCount:0,               //子账号总数
      balanceCount:0,               //余额总数
      consumeMoneyCount:0,          //消费总金额
      depts: [],
      //时间筛选，数据待修改
      timeBuckets:[],

      //查询条件，对应页面上的信息
      selectCustomerCondition:{
        index:1,        //页码
        timeBucket:-1

      },
      //查询条件，用于传递到后端
      condition:{
        index:1,        //页码

      },
      //查询的数据
      customers:[],
      craftLevels:[],       //制作要求
      members:[],           //客户等级
      tags:[],               //自定义标签
      field103:[
        {
          value:1,
          label:"有"
        },
        {
          value:2,
          label:"无"
        }
      ],
      consumeLevels:[]      //消费等级
      ,
      visible:false,        //控制用户详情弹窗
      uid: 0,               //用户详情需要的用户id
      visible2:false,       //控制新增与修改
      visible3:false,       //控制高级搜索
      topUpVisible:false,  //控制客户充值
      withdrawVisible:false,  //控制客户提现
      imVisible:false,        //控制客户账号新增页面
      max:1,                //分页页数

    }
  },
  methods: {
    customerInformation(id){
      if (id){
        this.uid=id;
      }
      //1:新增  2:修改
      this.visible2=true;

    },
    //打开高级搜索
    openAdvancedFilter(){
      this.visible3=true;
    },
    closeAdvancedFilter(){
      this.visible3=false;
      //清除高级搜索里面的数据
      this.clearCustomer();
    },
    // 用户详情
    onDetails(id){
      this.uid = id
      this.visible = true
    },
    //用户详情与新增修改页面关闭
    Close() {
      this.uid=0;
      this.visible = false;
      this.visible2=false;
      this.visible3=false;
      this.topUpVisible=false;
      this.withdrawVisible=false;
      this.imVisible=false;
    },
    getDict(type){
      getDictByType(type).then(res=>{
        if (type==="t_customer_consume"){
          this.consumeLevels=res;
        }else if (type==="t_customer_level"){
          this.members=res;
        }else if (type==="t_customer_make"){
          this.craftLevels=res;
        }else if(type==="t_customer_time"){
          this.timeBuckets=res;
        }else if (type==="t_customer_tag"){

        }
      })
    },
    handleTree(data, id, parentId, children, rootId) {
      id = id || 'id'
      parentId = parentId || 'parentId'
      children = children || 'children'
      rootId = rootId || 100
      // 对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data))
      // 循环所有项
      const treeData =  cloneData.filter(father => {
        let branchArr = cloneData.filter(child => {
          // 返回每一项的子级数组
          return father[id] == child[parentId]
        });
        branchArr.length > 0 ? father.children = branchArr : '';
        // 返回第一层
        return father[parentId] == rootId;
      });
      return treeData != '' ? treeData : data;
    }
    ,
    getDepts(){
      getDeptList().then(res => {
        this.depts=this.handleTree(res);
      })
    },
    getHeader(){
      findHeader().then(res=>{
        this.customerCount=res.customerCount;
        this.accountCount=res.accountCount;
        this.balanceCount=res.balanceCount;
        this.consumeMoneyCount=res.consumeMoneyCount;
      })
    },
    changeIndex(num){
      if (num==0){
        this.condition=this.selectCustomerCondition;
      }
      this.selectCustomerPage();
    }
    ,
    selectCustomerPage(){
      findCustomer(this.condition).then(res=>{
        this.customers=res.list;
        this.condition.index=res.pageNum;
        this.max=res.pages;
      })
    },
    clearCustomer(){
      this.selectCustomerCondition.workplaceIds=[];
      this.selectCustomerCondition.makeId=null;
      this.selectCustomerCondition.balance=null;
      this.selectCustomerCondition.levelId=null;
      this.selectCustomerCondition.consumeId=null;
    },
    timeChilck(type){
      if (type==1){
        this.selectCustomerCondition.timeBucket=-1;
        return;
      }
      this.selectCustomerCondition.timeScope=[];
      this.changeIndex(0);
    },
    statusChange(customer){
      updateCustomer(customer).then(res=>{
        this.selectCustomerPage();
      })
    },
    openTopUp(id){
      this.uid=id;
      this.topUpVisible=true;
    },
    openWithdraw(id){
      this.uid=id;
      this.withdrawVisible=true;
    },
    openIm(id){
      this.uid=id;
      this.imVisible=true;
    }

  },
  created() {
    this.getDict("t_customer_consume");
    this.getDict("t_customer_level");
    this.getDict("t_customer_make");
    this.getDict("t_customer_time");
    this.getDepts();
    this.getHeader();
  }
  ,
  mounted() {
    this.selectCustomerPage();
  }
}
</script>

<style>
.block{
  background-color: #f3ebeb;
}
.span1{
  font-size: 16px;
  font-weight: bold;
}
.span2{
  font-size: 14px;
  font-weight: normal;
  color: #989595;
}


.div1{
  border-radius: 10px;
  margin: 30px 15px 15px;
  background-color: white;
  padding: 10px;
}
.bg-purple {
  background: #f6f4f4;
}
.grid-content {
  border-radius: 4px;
  min-height: 80px;
}
.el-row{
  margin: 10px;
  padding-left: 10px;

}
.font-overstriking{
  font-weight: bold;
}
.font-light-color{
  color: #938c8c;

}
.padding-10{
  padding:10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 10px;
}
.el-icon-arrow-down {
  font-size: 10px;
}
</style>
